<template>
  <div id="app">
    <OneMain></OneMain>
    <!-- 进场动画 -->
    <nav id="myNav1">
      <div style="position: absolute">
        <div :style="divStyles"></div>
      </div>
      <div style="position: absolute; text-align: right; right: 0">
        <div :style="divStyles"></div>
      </div>
    </nav>
    <!-- 时间欢迎动画  -->
    <nav id="myNav2" style="position: absolute;" :style="timess">
      <div style="display: flex;justify-content: center;margin-top: 2vh;width: 100vw;">
        <div
            style="height:5vh;width: 10vw;background-color: rgba(0, 0, 0, 0.7);border-radius: 20px;text-align: center;padding: 5px">
          <p style="color:white;">{{ times }}好，缘鸢</p>
        </div>
      </div>
    </nav>
  </div>
  <!-- 底部个人简历与博客 -->
  <nav class="nav1">
    <div class="div1">
      <a href="#">缘鸢个人简历</a>
      <a id="a" href="#"> | </a>
      <a href="#">缘鸢个人博客</a>
    </div>
  </nav>
</template>

<script>
import OneMain from './components/OneMain.vue';

export default {
  name: 'App',
  data() {
    return {
      times: '',
      timess: {
        display: "none",
      },
      class: {
        div1: ['div']
      },
      divStyles: {
        width: "50vw",
        height: "100vh",
        transition: "2s",
        backgroundColor: "rgba(0, 0, 0, 1)",
      }
    };
  },
  components: {
    OneMain
  },
  created() {
    function aws() {
      setTimeout(() => {
        // 删除nav元素
        var nav = document.getElementById("myNav1");
        nav.parentNode.removeChild(nav);
      }, 2500)
    }

    function waitOneSecond() {
      setTimeout(() => {
        this.divStyles.width = '0vw'; // 修改响应式数据以触发视图更新
        this.divStyles.backgroundColor = "rgba(0, 0, 0, 0)";
      }, 500); // 500毫秒 = 0.5秒
    }

    function time() {
      setTimeout(() => {
        // 删除nav元素
        this.timess.display = "block";
      }, 1500)

      var date = new Date(); // 创建一个新的Date对象，表示当前日期和时间
      var hours = date.getHours(); // 使用getHours()方法获取当前的小时数（0-23）
      hours = (hours < 10) ? "0" + hours : hours; // 如果小时数小于10，则在前面加一个0，使其始终为两位数
      if (hours >= '00' && hours < '06') {
        this.times = '凌晨';
      } else if (hours >= '06' && hours < '12') {
        this.times = "早晨"
      } else if (hours >= '12' && hours < '13') {
        this.times = "中午"
      } else if (hours >= '13' && hours < '19') {
        this.times = "下午"
      } else if (hours >= '19' && hours < '21') {
        this.times = "傍晚"
      } else if (hours >= '21' && hours < '24') {
        this.times = "晚上"
      } else {
        this.times = hours + "点"
      }
      setTimeout(() => {
        // 删除nav元素
        var nav = document.getElementById("myNav2");
        nav.parentNode.removeChild(nav);
      }, 5000)
    }

    waitOneSecond.call(this); // 确保 `this` 指向正确的上下文
    aws.call(this)
    time.call(this)
  },
};
</script>

<style>
body, html {
  margin: 0;
  padding: 0;
}
</style>

<style scoped>
.nav1 {
  position: fixed;
  bottom: 15px;
  left: 0;
  width: 100%;
  //background-color: lightblue;
  //text-align: center;
  padding: 10px;
}
.div1{
  display: flex;
  justify-content: center;
}
a {
  text-decoration: none; /* 移除下划线 */
  color: white;
  margin-left: 5px;
  margin-right: 5px;
}

#a{
  color: black;
}
</style>
